<template>
  <div class="form-related-service-item">
    <biz-form-remote-select
      :field="field"
      :placeholder="$t('common.form.tip.relatedServiceItem.tip2')"
      :value="selectValue"
      :cleared="true"
      :remote-method="remoteMethod"
      multiple
      @input="updateServiceItem"
      value-key="id">
      <div class="service-template-option" slot="option" slot-scope="{ option }">
        <h3>{{ option.name }}</h3>
        <p>
          <span>
            <label>{{ $t('common.form.preview.serviceItem.label1') }}</label>
            <span>{{ option.serialNumber }}</span>
          </span>
          <span>
            <label>{{ $t('common.form.preview.serviceItem.label2') }}</label>
            <span>{{ option.unit }}</span>
          </span>
          <span>
            <label>{{ $t('common.form.preview.serviceItem.label3') }}</label>
            <span>{{ option.type }}</span>
          </span>
        </p>
      </div>
    </biz-form-remote-select>
  </div>
</template>

<script>
/* mixin */
import FormMixin from '@src/component/form/mixin/form';
/** api*/
import { servicePriceList } from '@src/api/ServicePriceApi';

export default {
  name: 'FormRelatedServiceItem',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      selectValue: this.value || [],
    };
  },
  computed: {},
  watch: {
    value: {
      handler(newValue) {
        if (!newValue) return;

        this.selectValue = newValue;
      },
      immediate: true,
    },
  },
  methods: {
    /** 获取服务项目 */
    async remoteMethod(e) {
      let params = {
        keyword: e.keyword,
        pageNum: e.pageNum,
        pageSize: 10,
        state: '1',
      };
      try {
        let res = await servicePriceList(params);

        if (!res.data || !res.data.list) return;

        res.data.list = (res.data.list || []).map(item => 
          Object.freeze({
            label: item?.name || '',
            value: item?.id || '',
            ...item,
          })
        );
        return res.data;
      } catch (error) {
        console.warn('etch -> error', error);
      }
    },
    /** 更新服务项目*/
    updateServiceItem(value) {
      this.inputForValue(
        value.map(item => {
          let { id, name } = item;
          return {
            id,
            name,
          };
        })
      );
    },
  },
};
</script>
<style lang="scss" scoped>
</style>
